<template>
  <button @click="showModal = true">打开Modal</button>
  <p>{{ showModal }}</p>
  <teleport to="#modal-container">
    <div v-show="showModal" class="modal">
      <h2>标题</h2>
      <p>这是模态窗口的内容</p>
      <button @click="showModal = false">关闭</button>
    </div>
  </teleport>
</template>
<script setup>
import { ref } from "vue";
const showModal = ref(false);
</script>
<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  border-radius: 8px;
  z-index: 1000;
  background-color: green;
  animation: fade 2s;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.modal h2 {
  color: #333;
}
.modal p {
  color: #444;
}
</style>
